import { RbacMenuType } from '@/datatypes/rbacMenu/data';
import { IconOutlinedValueEnum } from '@/enums/icon';
import { ProFormSelect, ProFormText, StepsForm } from '@ant-design/pro-components';
import { Modal } from 'antd';
import React from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<RbacMenuType>;

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<RbacMenuType>;
};

const UpdateForm: React.FC<UpdateFormProps> = (props) => {
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            style={{
              padding: '32px 40px 48px',
            }}
            destroyOnClose
            title="更新"
            open={props.updateModalVisible}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        initialValues={{
          component: props.values.component,
          icon: props.values.icon,
          redirect: props.values.redirect,
          exact: props.values.exact,
          path: props.values.path,
          name: props.values.name,
          parentId: props.values.parentId,
          menuType: props.values.menuType,
          sort: props.values.sort,
        }}
        title="基本信息"
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '路由名称为必填项',
            },
          ]}
          width="md"
          name="component"
          label={'路由名称'}
          placeholder={'请输入路由名称'}
        />
        <ProFormSelect
          rules={[
            {
              required: true,
              message: '图标为必填项',
            },
          ]}
          width="md"
          name="icon"
          label="图标"
          placeholder="请选择图标"
          valueEnum={IconOutlinedValueEnum}
          fieldProps={{
            optionLabelProp: 'label',
          }}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '重定向路径为必填项',
            },
          ]}
          width="md"
          name="redirect"
          label={'重定向路径'}
          placeholder={'请输入重定向路径'}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '是否精确匹配 1：是，0否为必填项',
            },
          ]}
          width="md"
          name="exact"
          label={'是否精确匹配 1：是，0否'}
          placeholder={'请输入是否精确匹配 1：是，0否'}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '路由路径为必填项',
            },
          ]}
          width="md"
          name="path"
          label={'路由路径'}
          placeholder={'请输入路由路径'}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '菜单名称为必填项',
            },
          ]}
          width="md"
          name="name"
          label={'菜单名称'}
          placeholder={'请输入菜单名称'}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '父级id为必填项',
            },
          ]}
          width="md"
          name="parentId"
          label={'父级id'}
          placeholder={'请输入父级id'}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '菜单类型为必填项',
            },
          ]}
          width="md"
          name="menuType"
          label={'菜单类型'}
          placeholder={'请输入菜单类型'}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '排序为必填项',
            },
          ]}
          width="md"
          name="sort"
          label={'排序'}
          placeholder={'请输入排序'}
        />
      </StepsForm.StepForm>
    </StepsForm>
  );
};

export default UpdateForm;
